<template>
  <div class="left-nav fz20">
    <!-- 左侧导航 -->
    <ul class="nav-list">
      <li :class="{ active: cateId === '' }">
        <a href="/index" class="ellipsis">
          <i class="iconfont icon-zonghe"></i>
          综合
        </a>
      </li>
      <li
        v-for="item in categoryList"
        :key="item._id"
        :class="{ active: cateId === item._id }"
        @click="handleClick(item._id)"
      >
        {{ item.name }}
      </li>
    </ul>
    <!-- 随机文章 -->
    <RandomList />
  </div>
</template>

<script>
export default {
  name: 'LeftNavRandom',
  data() {
    return {
      cateId: ''
    }
  },
  props: {
    // 分类列表
    categoryList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleClick(id) {
      this.cateId = id
      this.$emit('changeCategory', id)
    }
  }
}
</script>

<style lang="scss" scoped>
.left-nav {
  position: sticky;
  top: 30px;
  .nav-list {
    padding: 20px 10px 10px 10px;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    a {
      color: #333;
    }
    li {
      margin-top: 6px;
      cursor: pointer;
      &:hover {
        color: #fff;
        background-color: #ccc;
        border-radius: 5px;
      }
      &.active {
        background-color: skyblue;
        border-radius: 5px;
      }
    }
  }
}
</style>
